<template>
	<view class="uiwu-logo">
		<view class="uiwu-logo-box">
			<view class="uiwu-logo-box-title">资料完善</view>
			<view class="uiwu-logo-box-item">
				<view class="label">头像</view>
				<image @tap.stop="updateImage" mode="aspectFill" v-if="from.headimgurl" :src="from.headimgurl"></image>
				<button v-else open-type="chooseAvatar" @chooseavatar="bindchooseavatar" class="update">+</button>
			</view>
			<view class="uiwu-logo-box-item">
				<view class="label">昵称</view>
				<input type="nickname" v-model="from.nickname" placeholder="请输入昵称">
			</view>
			<view class="uiwu-logo-box-btn uiwu-flex uiwu-flex-center" style="margin-top: 100rpx;" @tap.stop="TapLogin">立即登录</view>
			<view class="uiwu-logo-box-btn uiwu-logo-box-btn1 uiwu-flex uiwu-flex-center" @tap.stop="closeLogin">暂不登录</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 授权登录弹窗
	 * 本弹窗目的是用于获取用户头像跟昵称跟code字段返回一个对象跟之前授权登录的结果差不多
	 * @event {Function()} closeChange 取消登录触发回调事件 
	 * @event {Function()} change 点击登录回调事件 
	 */
	// import {
	// 	baseURL
	// } from '@/config/app.js'
	export default {
		name:"uiwu-login-info",
		data() {
			return {
				from:{
					headimgurl:'',
					nickname:'',
					code:''
				}
			};
		},
		async created() {
			this.from.code = await this.uiwu.getCode()
		},
		methods:{
			updateImage(){
				uni.chooseImage({
					count:1,
					success: (e) => {
						console.log(e);
					}
				})
			},
			async bindchooseavatar({detail:{avatarUrl}}){
				const { data , msg , code } = await this.uiwu.updatefile({
					url:'file/formimage',
					filePath:avatarUrl,
					name:'file',
					success:(e)=>{
						console.log(e);
					}
				})
				if(!code) return this.uiwu.toast(msg)
				this.from.headimgurl = data.url
			},
			closeLogin(){
				this.$emit('closeChange')
			},
			TapLogin(){
				if(!this.from.headimgurl) return this.uiwu.toast('请上传头像')
				if(!this.from.nickname) return this.uiwu.toast('请填写昵称')
				this.$emit('change',this.from)
			}
		}
	}
</script>

<style lang="scss">
	.uiwu-logo{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(#000,0.5);
		z-index: 999;
	}
	.uiwu-logo-box{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: 50rpx;
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding-left: 60rpx;
		padding-right: 60rpx;
		&-title{
			padding: 30rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 40rpx;
			color: #222;
		}
		&-item{
			display: flex;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
			.update{
				width: 160rpx;
				height: 160rpx;
				border: 1rpx solid #E4E4E4;
				font-size: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FCFCFC;
				border-radius: 24rpx;
			}
			.label{
				width: 100rpx;
				text-align: left;
				font-size: 28rpx;
				color: #333;
			}
			input{
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: left;
			}
			image{
				border-radius: 20rpx;
				width: 160rpx;
				height: 160rpx;
			}
		}
		&-btn{
			width: 560rpx;
			height: 84rpx;
			border-radius: 20rpx;
			text-align: center;
			background: #07C160;
			margin-top: 30rpx;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #FFF;
			font-weight: 600;
			margin: 0 auto;
		}
		&-btn1{
			color: #07C160;
			background: #F2F2F2;
			margin-top: 30rpx;
		}
	}
</style>